(function () {
    $.fn.extend({
        myreg() {

            //验证码
            const draw = (show_num) => {
                var canvas_width = $('#canvas').width();
                var canvas_height = $('#canvas').height();
                var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
                var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length;//获取到数组的长度

                for (var i = 0; i < 1; i++) {
                    var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                    var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                    var txt = aCode[j];//得到随机的一个内容
                    show_num[i] = txt.toLowerCase();
                    var x = 10 + i * 20;//文字在canvas上的x坐标
                    var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                    context.font = "bold 23px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (var i = 0; i <= 5; i++) { //验证码上显示线条
                    context.strokeStyle = randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.stroke();
                }
                for (var i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = randomColor();
                    context.beginPath();
                    var x = Math.random() * canvas_width;
                    var y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            }
            //随机颜色
            const randomColor = () => {//得到随机的颜色值
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
            //防抖
            const debounce = (callback, delay) => {
                let timer; //这个变量不会受外部的影响
                return function () {
                    //this = body
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        //这里的this 指向window
                        //使用bind 改变this的指向
                        callback.bind(this)();
                    }, delay)
                }
            }
            var show_num = [];
            //渲染验证码
            draw(show_num);
            //点击更换验证码
            $("#canvas").on('click', function () {
                draw(show_num);
            })

            let flag=false;
            //用户名的正则
            var namereg = /^\w{6,10}$/;
            $("input[name='name']").on("input", debounce(function () {
                let oval = $(this).val();
                if (oval == '') {
                    //span提示文字
                    $("input[name='name']").parent().siblings().show().html("姓名不能为空！").css({ color: "red" });
                    //字体为红色
                    $(this).prev().css("color", "#f00");
                    flag=false;
                    
                } else if (!oval.match(namereg)) {
                    $("input[name='name']").parent().siblings().show().html("瓜皮 6-10位").css({ color: "red" });
                    $("input[name='name']").prev().css("color", "#f00");
                    flag=false;
                } else {
                    $(this).prev().css("color", "green");
                    $("input[name='name']").parent().siblings().show().html("可以注册呦").css({ color: "green" });
                    flag = true;
                }
           
                
            }, 1000))
            //密码1
            var pwdreg = /^.{6,16}$/;
            $("input[name='pwd']").on("input", debounce(function () {
                let oval = $(this).val();
                if (oval == '') {
                    //span提示文字
                    $("input[name='pwd']").parent().siblings().show().html("密码不能为空！").css({ color: "red" });
                    flag=false;
                    //字体为红色
                    $(this).prev().css("color", "#f00");
                } else if (!oval.match(pwdreg)) {
                    $("input[name='pwd']").parent().siblings().show().html("密码至少6位").css({ color: "red" });
                    $("input[name='pwd']").prev().css("color", "#f00");
                    flag=false;
                } else {
                    $(this).prev().css("color", "green");
                    $("input[name='pwd']").parent().siblings().show().html("可以注册").css({ color: "green" });
                    flag=true;
                   
                }
       
            }, 1000))

            //密码2
            $("input[name='pwd1']").on("input", debounce(function () {
                let oval = $(this).val();
                let oval1 = $(this).parents(".form11").find("input[name='pwd']").val();
                if (oval != oval1) {
                    $("input[name='pwd1']").parent().siblings().show().html("密码输入不一致").css({ color: "red" });
                    flag=false;
                } else {
                    $(this).prev().css("color", "green");
                    $(this).parent().siblings().show().html("可以注册").css({ color: "green" });
                    flag = true;
                }
               
            }, 600));

            //手机正则
            var phonereg = /^[1][3,4,5,7,8,9][0-9]{9}$/
            $("input[name='phone']").on("input", debounce(function () {
                let oval = $(this).val();
                if (oval == '') {
                    //span提示文字
                    $("input[name='phone']").parent().siblings().show().html("手机号不能为空！").css({ color: "red" });
                    //字体为红色
                    $(this).prev().css("color", "#f00");
                    flag=false;
                } else if (!oval.match(phonereg)) {
                    $("input[name='phone']").parent().siblings().show().html("手机号格式错误").css({ color: "red" });
                    $("input[name='phone']").prev().css("color", "#f00");
                    flag=false;
                } else {
                    $(this).prev().css("color", "green");
                    $("input[name='phone']").parent().siblings().show().html("可以注册").css({ color: "green" });
                   flag = true;
                }
              
            }, 1000))



            $(".form11").on("submit", function () {
                if (flag) {
                    console.log(22);
                    $("input").on("mouseleave", () => {
                        $(this).prev().css("color", "black");
                        $(".msga").hide()
                    })
                    let val = $(".input-val").val().toLowerCase();
                    let num = show_num.join("");
                    if (val == '') {
                        layer.msg('请输入验证码！', { time: 5000 });
                    } else if (val != num) {
                        layer.msg('验证码错误！请重新输入！', { time: 5000 });
                        $(".input-val").val('');
                        draw(show_num);
                    }
                    else if (val === num) {
                        layer.msg("可以了宝", { time: 1000 });
                        let data = $(".form11").serialize();
                        $.ajax({
                            url: "/api/reg",
                            type: "post",
                            data: data
                        }).then(function (res) {
                            console.log(res);
                            layer.msg(res.message, { time: 5000 });
                            if(res.message=="注册成功"){
                                if(confirm('要去登录吗')){
                                    location="./login.html"
                                }
                            }
                            
                        })
                    }

                }







                return false;
            })
        }
    })

})()
$(function () {
    $(window).load(function () {
        $(".form11").myreg();
    })
})
